<template>
  <div>
    <van-card class="card-class">
      <div slot="thumb">
        <van-image width="70" height="96" :src="`${$common.filePath}${obj.pic}`" />
      </div>
      <div slot="title">
        <p class="title-info van-multi-ellipsis--l2">{{obj.subject}}</p>
      </div>
      <div slot="desc">
        <p class="book-info van-ellipsis">{{obj.name}}</p>
        <p class="book-info van-ellipsis">{{obj.date}}</p>
      </div>
    </van-card>
    <div class="attchment" v-for="(item,index) in obj.fileoffice" :key="index" @click="preview(item)">
      <img class="attchment-img" :src="$common.fileIcon(item.ext)" />
      <p class="attchment-name">
        <span class="van-ellipsis">{{item.filename.split(".")[0]}}</span>
        . {{item.ext}}
    </p>
    </div>
    <div class="contents" v-html="obj.content"></div>
  </div>
</template>
<script type="text/javascript">
  export default{
    data() {
      return{
        obj: {
          pic:"",
          subject:"",
          name:"",
          date:"",
          fileoffice:[],
          content:""
        }
      }
    },
    activated() {
      this.pic= ""
      this.subject= ""
      this.name= ""
      this.date= ""
      this.fileoffice= []
      this.content= ""
      this.$bridge.callHandler('navBack')
      this.$bridge.callHandler('navTitle', {title: '期刊详情'})

      this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
        this.$router.go(-1)
        responseCallback('go(-1)')
      })

      this.showDetail()
    },
    methods:{
      /**
       * 查询详情
       * @return {[type]} [description]
       */
      showDetail() {
        let imgReg = /<img.*?(?:>|\/>)/gi;
        let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
        let config = {
          method: "post",
          url: `${this.$common.basePath}book/book_manage.php`,
          data: {
            do: "journals_detail",
            id: this.$route.query.jid
          }
        }
        this.$axios(config).then(res => {
          this.obj.pic = res.data.pic
          this.obj.subject = res.data.subject
          this.obj.name = res.data.name
          this.obj.date = res.data.date
          this.obj.fileoffice = res.data.fileoffice
 
          let content = res.data.content
          this.obj.content = content.replace(/<img src="/g,'<img width="100%" src="'+this.$common.filePath)
        }).catch(err => {

        })
      },
      /**
       * 预览
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      preview(item) {
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item.fileaddr}`,
          fileName: item.filename
        })
        window.open(`${this.$common.filePath}${item.fileaddr}?filename=${item.filename}`)
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .van-card__thumb{
    width: 70px;
    height: 96px;
  }
  .van-card__content{
    margin-left: 7px;
  }
  .card-class{
    background-color: #fff;
    padding: 15px;
  }
  .title-info{
    min-height: 48px;
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    margin: 0;
  }
  .book-info{
    color: #999999;
    font-size: 14px;
    margin: 3px 0;
  }
  .attchment{
    margin: 0 15px 15px 15px;
    padding: 15px;
    background: rgba(46, 121, 255, 0.07);
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .attchment-img{
    width: 20px;
    height: 23px;
  }
  .attchment-name{
    margin-left: 15px;
    color: #333333;
    font-size: 17px;
  }
  .contents{
    margin: 0 15px;
  }
</style>